import React from 'react';
import { PageLoading } from '@ant-design/pro-layout';
import type { ConnectProps } from 'umi';
import { Link, Redirect, connect } from 'umi'; // FormattedMessage
import { stringify } from 'querystring';
import type { ConnectState } from '@/models/connect';
import type { CurrentUser } from '@/models/user';
import styles from './AdminSecurityLayout.less';
import moment from 'moment';
import classnames from 'classnames';
import IconsHome from '../../public/icons/home.png';
import IconsDown from '../../public/icons/down.png';
import IconsWarn from '../../public/icons/warn.png';
import IconsHelp from '../../public/icons/help.png';
import IconsUserHead from '../../public/icons/user-head.png';
import IconsLogout from '../../public/icons/logout.png';
import { Layout } from 'antd';
import { HelmetProvider } from 'react-helmet-async';

moment.locale('zh-cn');
const { Header } = Layout;

type SecurityLayoutProps = {
  loading?: boolean;
  currentUser?: CurrentUser;
} & ConnectProps;

type SecurityLayoutState = {
  isReady: boolean;
};

const AdminHeader: React.FC = () => {
  const imgIcon = classnames(styles.icon, styles.white);
  return (
    <Layout className={styles.container}>
      <Header className={styles.content} style={{ width: '100%', padding: '0px' }}>
        <div className={styles.top}>
          <div className={styles.header}>
            <span className={styles.title}>科研管理系统</span>
            <div className={styles.header_space}></div>
            <div className={styles.header_navigation}>
              <div className={styles.header_date}>
                {moment().format('YYYY年MM月DD日 HH:mm:ss dddd')}
              </div>

              <Link to="/">
                <img className={imgIcon} alt="logo" src={IconsHome} />
              </Link>
              <Link to="/">
                <img className={imgIcon} alt="logo" src={IconsDown} />
              </Link>
              <Link to="/">
                <img className={imgIcon} alt="logo" src={IconsWarn} />
              </Link>
              <Link to="/">
                <img className={imgIcon} alt="logo" src={IconsHelp} />
              </Link>
              <Link to="/">
                <img className={styles.icon} alt="logo" src={IconsUserHead} />
              </Link>
              <Link to="/user/home">
                <img className={imgIcon} alt="logo" src={IconsLogout} />
              </Link>
            </div>
          </div>
        </div>
      </Header>
    </Layout>
  );
};

class SecurityLayout extends React.Component<SecurityLayoutProps, SecurityLayoutState> {
  state: SecurityLayoutState = {
    isReady: false,
  };

  componentDidMount() {
    this.setState({
      isReady: true,
    });
    const { dispatch } = this.props;
    if (dispatch) {
      dispatch({
        type: 'user/fetchCurrent',
      });
    }
  }

  render() {
    const { isReady } = this.state;
    const { children, loading, currentUser } = this.props;
    // You can replace it to your authentication rule (such as check token exists)
    // 你可以把它替换成你自己的登录认证规则（比如判断 token 是否存在）
    const isLogin = currentUser && currentUser.userid;
    const queryString = stringify({
      redirect: window.location.href,
    });

    if ((!isLogin && loading) || !isReady) {
      return <PageLoading />;
    }
    if (!isLogin && window.location.pathname !== '/user/login') {
      return <Redirect to={`/user/login?${queryString}`} />;
    }

    return (
      <HelmetProvider>
        <div id="pageHeader" className={styles.pageHeader}>
          <AdminHeader></AdminHeader>
        </div>
        <div className={styles.pageBody}>{children}</div>
      </HelmetProvider>
    );
  }
}

export default connect(({ user, loading }: ConnectState) => ({
  currentUser: user.currentUser,
  loading: loading.models.user,
}))(SecurityLayout);
